<template>
<!-- 此案例演示使用elementUI 通过后台完成的上传过程 -->
  <div class="backuploadByelement">
    <h2>This is an 	back upload by elementUI's page</h2>
 <el-upload
      class="upload-demo"
      ref="upload"
      :action="uploadArea"
      :http-request="submit"
      :file-list="fileList"
      :auto-upload="false"
    >
      <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
      <el-button
        style="margin-left: 10px"
        size="small"
        type="success"
        @click="submitUpload"
        >发送到后台</el-button
      >
      <div slot="tip" class="el-upload__tip">
        只能上传jpg/png文件，且不超过500000000000kb
      </div>
    </el-upload>
    <img style="max-height:400px;max-width:400px;margin:0 auto;" v-show="imgSrc!=''" :src="imgSrc" alt="">
  </div>
  </div>
</template>

<script>
import axios from "axios"; //axios用于网络请求
export default {
  name: "back_uploadByelement",
  data() {
    return {
      fileList: [],
      token: "", //token
      uploadArea: "/api_hu66/uploadBybackend/token", //此处为七牛云华南区的空间地址
      fileData: "", //文件数据，用于保存上传七牛云
      fileName: "", //文件名，用于上传后的命名方式,
      imgSrc: "", //用于保存上传后的图片地址
    };
  },
  methods: {
    submitUpload() {
      this.$refs.upload.submit();
    },
    // 具体上传操作，此函数赋值给http-request，用于覆盖elementUI原本的上传的默认操作
    submit(req) {
      let fileStream = ''//用于保存文件流
      console.log("请求本地图片的信息打印:",req)
      console.log("本地图片信息：", req.file); //请求本地文件数据的详细信息
      this.fileName = "hmytest_" + req.file.name; //将本地文件重命名并赋值给fileName
      var reader = new FileReader();
      reader.onload = (e) =>{
        console.log("异步代码区域开始,开始读取本地文件流**************************")

        fileStream = reader.result; //赋值文件数据
        console.log("本地文件流：",fileStream)
      // 后台发送图片到七牛云，前台只需把数据发送给后台，后台自己生成token，自己上传数据
      // 此处区别于前台上传的是，前台上传可以只传文件地址，后台上传需要全部的文件数据
       axios.request({
         url:"/api_hu66/uploadBybackend",
         method:'post',
         data:{
           key:this.fileName,//文件名
           fileData:fileStream,//文件数据 要是前台上传，这里只传本地的文件的地址信息就够了，但是要把文件发给后台，必须传递全部文件信息,此处为文件流
         }
       }).then((res) => {
          //  console.log("*********************************");
           console.log("把图片数据全部发送到,使用后台完成上传图片,后台的响应信息：", res);
           this.imgSrc = res.data.imgSrc;
           console.log("图片的线上地址:",this.imgSrc)
         })

         console.log("异步代码区域结束,完成读取本地文件流**************************")
      }
       reader.readAsDataURL(req.file)//以base64的数据流读取本地文件,故意放在这里,因为这里的读取为异步操作,执行到这里，会触发上面的reader.onload
   
    },
  },
};
</script>

<style lang="less" scoped>
.backuploadByelement {
  z-index: 2;
  padding-top: 100px;
  position: relative;
  width: 300px;
  margin: 0 auto;
}
</style>